<template>
  <div style="width:600px">
    <div class="xian"></div>
    <el-card>
      <div>
        {{id > 0 ? '编辑' : '添加'}}分类信息 {{parentId > 0 ? parentTitle : ''}}
        <el-form ref="categoryForm" :model="form" label-width="100px" size="small">
          <el-form-item label="分类标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="英文标题">
            <el-input v-model="form.titleEn"></el-input>
          </el-form-item>
          <el-form-item label="分类图片">
            <el-row :gutter="1">
              <el-col :span="20">
                <el-input v-model="form.imgSrc"></el-input>
              </el-col>
              <el-col :span="3">
                <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="uploadSuccess" :on-error="uploadError">
                  <el-button type="primary">上传
                    <i class="el-icon-upload el-icon--right"></i>
                  </el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="描述信息">
            <el-input v-model="form.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></el-input>
          </el-form-item>
          <el-form-item label="详细信息">
            <el-input v-model="form.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('categoryForm')">确定</el-button>
            <el-button @click="goBack()" style="margin-left: 8px">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  insertCategory,
  updateCategory,
  findCategoryById
} from "@/api/category"

export default {
  name: "categoryEdit",
  data() {
    return {
      id: this.$route.query.id,
      parentTitle: this.$route.query.title,
      parentId:
        this.$route.query.parentId == null ? 0 : this.$route.query.parentId,
      layer: this.$route.query.layer == null ? 0 : this.$route.query.layer + 1,
      form: {
        title: "",
        imgSrc: ''

      }
    }
  },
  created() {
    this.initEditInfo()
  },
  methods: {
    initEditInfo() {
      if (this.id > 0) {
        findCategoryById(this.id).then(data => {
          this.form = data
        })
      }
    },
    uploadSuccess(response, file, fileList) {
      this.form.imgSrc = response.data.file_name
    },
    uploadError() {},
    submit(name) {
      if (this.form.title == "") {
        this.$Message.error("请输入分类名称!")
        return
      }

      if (this.id > 0) {
        updateCategory(this.form).then(data => {
          if (data.result) {
            this.$message({
              message: "更新成功",
              type: "success"
            })
          } else {
            this.$message.error("更新失败!")
          }
        })
      } else {
        this.form.parentId = this.parentId
        this.form.layer = this.layer
        insertCategory(this.form).then(data => {
          if (data.result) {
            this.$message({
              message: "添加成功",
              type: "success"
            })
            this.form = {}
          } else {
            this.$Message.error("添加失败!")
          }
        })
      }
    },
    goBack() {
      this.$router.push({ name: "categoryList" })
    }
  }
}
</script>
